<template>
  <div>
    <!-- 图片上传 s-->
    <el-checkbox-group v-model="curImgUrl" v-show="false"></el-checkbox-group>
    <el-upload
      drag
      class="upload-common"
      ref="upload"
      action=""
      :limit="1"
      :http-request="getFile"
      :before-upload="limtUpload"
      :on-remove="handleRemove"
      :show-file-list="false"
      :on-change="changeFile"
      :file-list="curList"
      accept="image/jpg,image/jpeg,image/png,image/JPG,image/JPEG,image/PNG"
      list-type="picture">
      <div v-if="btnLoading">
        <span class="el-icon-loading"></span>
      </div>
      <div v-else>
        <img v-if="curImgUrl" :src="curImgUrl" alt="">
        <span v-else class="upload-icon"></span>
      </div>
      <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/jpeg/png文件，且不超过2M</div> -->
    </el-upload>
  </div>
</template>

<script>
export default {
  props: {
    imgUrl: String
  },
  data () {
    return {
      btnLoading: false,
      curImgUrl: this.imgUrl,
      curList: []
    }
  },
  async created () {
  },
  watch: {
  },
  methods: {
    limtUpload (file) {
      const isImgType = /^image\/(jpeg|jpg|png|JPG|PNG|JPEG)+$/.test(file.type)
      const isLt = file.size / 1024 / 1024 <= 2
      if (!isImgType) {
        this.$message('上传的图片只能是jpg/jpeg/png文件')
      }
      if (!isLt) {
        this.$message('上传的图片不能超过2M')
      }
      return isImgType && isLt
    },
    getBase64 (file) { // 图片转成base64
      return new Promise((resolve, reject) => {
        const reader = new FileReader()
        var fileResult = ''
        reader.readAsDataURL(file)
        reader.onload = function () {
          fileResult = reader.result
        }
        reader.onerror = function (error) {
          reject(error)
        }
        reader.onloadend = function () {
          resolve(fileResult)
        }
      })
    },
    changeFile () {
      this.btnLoading = true
    },
    async getFile (data) { // 实际自己封装用post上传
      this.getBase64(data.file).then(res => {
        setTimeout(() => {
          let newImg = {
            name: 'd',
            url: res
          }
          this.btnLoading = false
          this.curList.push(newImg)
          this.curImgUrl = res
          this.$emit('uploadImgSuc', this.curImgUrl)
          this.$message({ message: '上传成功', type: 'success' })
          // this.curList = []
        }, 3000)
      })
    },
    handleAvatarSuccess(res, file) {
      setTimeout(() => {
        this.btnLoading = false
        this.curList = this.fileList
        this.$emit('uploadImgSuc')
        this.$message({ message: '上传成功', type: 'success' })
      }, 3000)
      // this.curImgUrl = URL.createObjectURL(file.raw)
    },
    // 上传图片
    handleRemove (file, fileList) {
      this.curList = this.curList.filter(obj => obj.uid !== file.uid)
    }
  }
}
</script>

<style lang="less" scoped>
.upload-common {
  width: 320px;
  padding-top: 10px;
  text-align: center;
  /deep/ .el-upload-dragger {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 320px;
    height: 180px;
    border: 1px solid #DDE0E4;
    border-radius: 0;
    overflow: hidden;
    img {
      width: 100%;
    }
    .upload-icon{
      display: block;
      width: 32px;
      height: 32px;
      background: url('../../assets/upload-add.png')
    }
  }
}
</style>